<script setup lang="ts">
import { ref } from 'vue';

defineProps<{
  gap: number;
}>();

const functionList = ref([
  {
    title: '个人信息',
    desc: '管理您的个人资料和设置',
    icon: 'User',
    color: 'var(--el-color-primary)'
  },
  {
    title: '我的订单',
    desc: '查看和管理您的订单记录',
    icon: 'ShoppingCart',
    color: 'var(--el-color-success)'
  },
  {
    title: '消息中心',
    desc: '查看系统通知和消息',
    icon: 'Message',
    color: 'var(--el-color-warning)'
  },
  {
    title: '财务管理',
    desc: '账单查询和财务明细',
    icon: 'Money',
    color: 'var(--el-color-danger)'
  },
  {
    title: '优惠券',
    desc: '查看可用的优惠券',
    icon: 'Tickets',
    color: 'var(--el-color-info)'
  },
  {
    title: '收货地址',
    desc: '管理您的收货地址',
    icon: 'Location',
    color: '#8A2BE2'
  }
]);
</script>

<template>
  <el-row :gutter="gap">
    <el-col :xl="8" :lg="8" :md="12" :sm="24" v-for="(item, index) in functionList" :key="index" class="mb-16px">
      <el-card class="h-180px">
        <div class="h-full flex-col flex-center">
          <div class="mb-16px">
            <el-icon :size="48" :style="{ color: item.color }">
              <component :is="item.icon" />
            </el-icon>
          </div>
          <h3 class="text-18px font-bold mb-8px">{{ item.title }}</h3>
          <p class="text-center text-14px text-gray-600 dark:text-gray-300">{{ item.desc }}</p>
          <el-button type="primary" link class="mt-12px">立即查看</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<style scoped>
.el-card:deep(.el-card__body) {
  padding: 12px;
  height: 100%;
}
</style> 